<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折线图数据展示</title>
    <link rel="stylesheet" href="../static/assets/css/index.css">
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
    <link rel="stylesheet" href="../static/assets/font/iconfont.css">
    <!-- <script src="./js/index.js"></script> -->
    <link rel="stylesheet" href="../static/assets/css/110.css">
    <script src="../static/assets/js/echarts.min.js"></script>

</head>
<body>
    <!-- 侧边栏 -->
    <aside class="main-aside">
        <!-- 3D动态盒 -->
        <div class="header3D">
            <div class="cube" id="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
        </div>
        <!-- 侧边栏选项 -->
        <div class="asideOption">
            <ul>
                <li>
                    <a href="index.html">
                        <span>首页</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bar.html">
                        <span>柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="pie.html">
                        <span>饼图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="line.html">
                        <span>折线图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bubble.html">
                        <span>气泡图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="polar-bar.html">
                        <span>极坐标下的堆积柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
            </ul>



        </div>
        <!-- 旋转图 -->
        <div class="loader">
            <div class="left-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="right-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </aside>
    <!-- 头部导航栏 -->
     <div class="headernav">
         <h1>折线图展示-景区与热度</h1>
            <select name="area" id="">
                <option value="西藏" class="one">西藏</option>
                <option value="张家界" class="two">张家界</option>
                <option value="大理" class="three">大理</option>
                <option value="长沙" class="four">长沙</option>
            </select>
        <!-- 时间 -->
        <button id="time" type="text"></button>
    </div>
    <!-- 内容区 -->
    <div class="main-content" style="height: 100%">
        <!-- 内容展示 -->
        <div class="show-content" id="main" style="height: 93%">
        </div>
    </div>



    <!-- 时间 -->
    <script src="../static/assets/js/index.js"></script>

    <!-- 折线图 -->
    <script>
        function xizang(){
         var chartDom = document.getElementById('main');
          chartDom.innerHTML = `
                {% for data in xizang %}
{#                    {% if data[4] != 0 %}#}
                        <p>{{ data[0] }}</p>
                        <p>{{ data[4] }}</p>
{#                    {% endif %}#}
                {% endfor %}
          `
          var oP = document.querySelectorAll("p");
          var arr = [];
          for(var i = 0; i < 100; i++){
              arr.push(oP[i].innerText);
          }

          var arr1 = [];
          var arr2 = [];
          for(var i = 0; i< arr.length; i++){
              if(i%2 == 0){
                  arr1.push(arr[i]);
              }
              else{
                  arr2.push(arr[i]);
              }
          }

        console.log(arr);
          console.log(arr1);
          console.log(arr2);
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '西藏景区-热度折线图',
            subtext: '50个景点',
            subtextStyle: {
                fontSize: 16,
                fontWeight: 'bolder',
                color: '#000'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arr1
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [
            {
              name: '热度',
              type: 'line',
              data: arr2,
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            }
          ]
        };

        option && myChart.setOption(option);
    }
        function zjj(){
         var chartDom = document.getElementById('main');
          chartDom.innerHTML = `
                {% for data in zjj %}
{#                    {% if data[4] != 0 %}#}
                        <p>{{ data[0] }}</p>
                        <p>{{ data[4] }}</p>
{#                    {% endif %}#}
                {% endfor %}
          `
          var oP = document.querySelectorAll("p");
          var arr = [];
          for(var i = 0; i < 100; i++){
              arr.push(oP[i].innerText);
          }
          var arr1 = [];
          var arr2 = [];
          for(var i = 0; i< arr.length; i++){
              if(i%2 == 0){
                  arr1.push(arr[i]);
              }
              else{
                  arr2.push(arr[i]);
              }
          }

        console.log(arr);
          console.log(arr1);
          console.log(arr2);
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '张家界景区-热度折线图',
            subtext: '50个景点',
            subtextStyle: {
                fontSize: 16,
                fontWeight: 'bolder',
                color: '#000'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arr1
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [
            {
              name: '热度',
              type: 'line',
              data: arr2,
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            }
          ]
        };

        option && myChart.setOption(option);
    }
        function dali(){
         var chartDom = document.getElementById('main');
          chartDom.innerHTML = `
                {% for data in daLi %}
{#                    {% if data[4] != 0 %}#}
                        <p>{{ data[0] }}</p>
                        <p>{{ data[4] }}</p>
{#                    {% endif %}#}
                {% endfor %}
          `
          var oP = document.querySelectorAll("p");
          var arr = [];
          for(var i = 0; i < 100; i++){
              arr.push(oP[i].innerText);
          }

          var arr1 = [];
          var arr2 = [];
          for(var i = 0; i< arr.length; i++){
              if(i%2 == 0){
                  arr1.push(arr[i]);
              }
              else{
                  arr2.push(arr[i]);
              }
          }

        console.log(arr);
          console.log(arr1);
          console.log(arr2);
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '大理景区-热度折线图',
            subtext: '50个景点',
            subtextStyle: {
                fontSize: 16,
                fontWeight: 'bolder',
                color: '#000'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arr1
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [
            {
              name: '热度',
              type: 'line',
              data: arr2,
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            }
          ]
        };

        option && myChart.setOption(option);
    }
        function cs(){
         var chartDom = document.getElementById('main');
          chartDom.innerHTML = `
                {% for data in cs %}
{#                    {% if data[4] != 0 %}#}
                        <p>{{ data[0] }}</p>
                        <p>{{ data[4] }}</p>
{#                    {% endif %}#}
                {% endfor %}
          `
          var oP = document.querySelectorAll("p");
          var arr = [];
          for(var i = 0; i < 100; i++){
              arr.push(oP[i].innerText);
          }

          var arr1 = [];
          var arr2 = [];
          for(var i = 0; i< arr.length; i++){
              if(i%2 == 0){
                  arr1.push(arr[i]);
              }
              else{
                  arr2.push(arr[i]);
              }
          }

        console.log(arr);
          console.log(arr1);
          console.log(arr2);
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '长沙景区-热度折线图',
            subtext: '50个景点',
            subtextStyle: {
                fontSize: 16,
                fontWeight: 'bolder',
                color: '#000'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arr1
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [
            {
              name: '热度',
              type: 'line',
              data: arr2,
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            }
          ]
        };

        option && myChart.setOption(option);
    }

        // 默认显示西藏
        xizang()
        // 下拉框
        var select = document.querySelector('select');
        select.addEventListener('change', function (evt){
            var e = evt || window.event;
            // 移除之前创建的实例并且重新创建一个Echarts实例
            document.getElementById("main").removeAttribute('_echarts_instance_');
            var index = select.selectedIndex;
            if(index == 0){
                xizang();
            }else if(index == 1){
                zjj();
            }else if(index == 2){
                dali();
            }else{
                cs();
            }
        })
    </script>
</body>
</html>